<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <!-- <el-col :span="24"> -->
      <el-form-item label="" prop="productNo">
        <el-input
          v-model="queryParams.productNo"
          placeholder="请输入货号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="" prop="colorPropertyStr" label-width="100px">
        <el-input
          v-model="queryParams.colorPropertyStr"
          placeholder="请输入颜色"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="" prop="customPlanTime" label-width="100px">
                <el-input v-model="queryParams.customPlanTime" placeholder="请输入上架时间" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
      <el-form-item
        label=""
        prop="customPlanTimeStart
"
        label-width="160px"
      >
        <el-date-picker
          clearable
          v-model="queryParams.customPlanTimeStart"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始上架时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label=""
        prop="customPlanTimeEnd
"
        label-width="160px"
      >
        <el-date-picker
          clearable
          v-model="queryParams.customPlanTimeEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束上架时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="firstLevelColumn">
        <!-- <el-input v-model="queryParams.firstLevelColumn" placeholder="请输入一级类目" clearable
                            @keyup.enter.native="handleQuery" /> -->
        <el-select
          v-model="queryParams.firstLevelColumn"
          placeholder="一级类目"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pl"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="firstLevelExtendedColumn">
        <el-select
          v-model="queryParams.firstLevelExtendedColumn"
          placeholder="二级类目"
          filterable
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_product_secondary"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="secondLevelColumn">
        <!-- <el-input v-model="queryParams.secondLevelColumn" placeholder="三级类目" clearable
                            @keyup.enter.native="handleQuery" /> -->
        <el-select
          v-model="queryParams.secondLevelColumn"
          placeholder="三级类目"
          filterable
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_product_cycle"
            :key="dict.label"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="运营-计划上架时间范围" prop="operationPlanTime" label-width="160px">
                <el-date-picker clearable v-model="queryParams.operationPlanTimeStart" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择运营上架开始时间">
                </el-date-picker>——
                <el-date-picker clearable v-model="queryParams.operationPlanTimeEnd" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择运营上架结束时间">
                </el-date-picker>

            </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          :icon="!isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          size="mini"
          @click="shouqi"
          >展开/收起</el-button
        >
      </el-form-item>
      <!-- </el-col> -->

      <div v-show="isOpen">
        <!-- <el-col :span="24"> -->
        <el-form-item label="" prop="copywritingFabricName" label-width="100px">
          <el-input
            v-model="queryParams.copywritingFabricName"
            placeholder="请输入面料昵称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="designFabricFunction" label-width="100px">
          <el-input
            v-model="queryParams.designFabricFunction"
            placeholder="请输入面料功能"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="copywritingFamily " label-width="100px">
          <el-input
            v-model="queryParams.copywritingFamily"
            placeholder="请输入面料家族"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="" prop="customerSellingPoint">
          <el-input
            v-model="queryParams.customerSellingPoint"
            placeholder="请输入卖点提炼"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="customerProductTalking">
          <el-input
            v-model="queryParams.customerProductTalking"
            placeholder="请输入产品话术"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          label=""
          prop="customerStrengthSuitable"
          label-width="100px"
        >
          <el-input
            v-model="queryParams.customerStrengthSuitable"
            placeholder="请输入强度/适合人群"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          label=""
          prop="designShockproofDegree"
          label-width="100px"
        >
          <el-input
            v-model="queryParams.designShockproofDegree"
            placeholder="请输入防震程度/腰高"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="designChestPad" label-width="100px">
          <el-input
            v-model="queryParams.designChestPad"
            placeholder="请输入胸垫/裤裆"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="designGatheringDegree" label-width="100px">
          <el-input
            v-model="queryParams.designGatheringDegree"
            placeholder="请输入聚拢程度"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="operationChannlLink" label-width="100px">
          <el-input
            v-model="queryParams.operationChannlLink"
            placeholder="请输入渠道链接"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <!-- </el-col> -->
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['product:template:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['product:template:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['product:template:remove']">删除</el-button>
            </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="daoru"
          >导入</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <div ref="tableDom">
      <el-table
        :maxHeight="templateList.length ? tableHeight : 'auto'"
        v-loading="loading"
        :data="templateList"
        @selection-change="handleSelectionChange"
        border
        id="bootstrap‐table"
        width="150px"
        :row-style="{ height: '100px' }"
        @row-dblclick="t"
        ref="table"
      >
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="产品模板ID" align="center" prop="proNewId" width="150px" /> -->
        <el-table-column
          fixed
          label="货号"
          align="center"
          prop="productNo"
          width="150px"
        />
        <el-table-column
          fixed
          :label="'产品图'"
          align="center"
          prop="picUrl"
          width="110px"
        >
          <template #default="scope">
            <image-preview :src="scope.row.picUrl" :width="80" :height="80" />
            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.picUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                  lazy
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="object-fit: contain; width: 80px; height: 80px"
                  lazy
                />
              </template>
            </el-popover> -->
          </template>
        </el-table-column>

        <el-table-column
          fixed
          label="颜色"
          align="center"
          prop="colorProperty"
          :formatter="formatData"
          width="150px"
        />
        <el-table-column
          :label="'一级类目'"
          align="center"
          prop="firstLevelColumn"
        />
        <el-table-column
          width="140"
          :label="'二级类目'"
          align="center"
          prop="firstLevelExtendedColumn"
        />
        <el-table-column
          width="140"
          :label="'三级类目'"
          align="center"
          prop="secondLevelColumn"
        />
        <el-table-column
          width="150px"
          :label="'设计/尺码'"
          align="center"
          prop="designSize"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <el-input
                v-model="scope.row.designSize"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.designSize }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" :label="'运营\n计划上架时间'" align="center" prop="operationPlanTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.operationPlanTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column> -->
        <el-table-column
          width="100px"
          :label="'面料功能'"
          align="center"
          prop="designFabricFunction"
        />
        <el-table-column
          width="100px"
          :label="'面料名称'"
          align="center"
          prop="designFabricName"
        />
        <el-table-column
          width="100px"
          :label="'家族分类'"
          align="center"
          prop="copywritingFamily"
        />
        <el-table-column
          width="100px"
          :label="'面料昵称'"
          align="center"
          prop="copywritingFabricName"
        />
        <el-table-column
          width="100px"
          :label="'胸垫/裤裆'"
          align="center"
          prop="designChestPad"
        />
        <el-table-column
          width="120px"
          :label="'防震程度/腰高'"
          align="center"
          prop="designShockproofDegree"
        />
        <el-table-column
          width="100px"
          :label="'聚拢程度 '"
          align="center"
          prop="designGatheringDegree"
        />
        <el-table-column
          width="110px"
          :label="'小别名'"
          align="center"
          prop="copywritingNickname"
        />

        <el-table-column
          :label="'天猫主图'"
          align="center"
          prop="customerPicture"
          width="110px"
        >
          <template #default="scope">
            <image-preview
              :src="scope.row.customerPicture"
              :width="80"
              :height="80"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fabricComposition"
          width="100px"
          :label="'设计\n面料成分'"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.designSpecialPresentation }}</span> -->
              <el-input
                v-model="scope.row.fabricComposition"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">{{ scope.row.fabricComposition }} </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="designSpecialPresentation"
          width="100px"
          :label="'设计\n特别呈现卖点'"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.designSpecialPresentation }}</span> -->
              <el-input
                v-model="scope.row.designSpecialPresentation"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.designSpecialPresentation }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="copywritingFunctionDisplay"
          width="100px"
          :label="'文案\n功能展示'"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingFunctionDisplay }}</span> -->
              <el-input
                v-model="scope.row.copywritingFunctionDisplay"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.copywritingFunctionDisplay }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" :label="'文案\n细节展示'" align="center" prop="copywritingDetailShow" /> -->
        <el-table-column
          prop="copywritingDetailShow"
          width="100px"
          :label="'文案\n细节展示'"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingDetailShow }}</span> -->
              <el-input
                v-model="scope.row.copywritingDetailShow"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.copywritingDetailShow }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" :label="'文案\n设计原理'" align="center" prop="copywritingDesignPrinciple" /> -->
        <el-table-column
          prop="copywritingDesignPrinciple"
          width="100px"
          :label="'文案\n设计原理'"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingDesignPrinciple }}</span> -->
              <el-input
                v-model="scope.row.copywritingDesignPrinciple"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.copywritingDesignPrinciple }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          :label="'卖点提炼'"
          align="center"
          prop="customerSellingPoint"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerSellingPoint }}</span> -->
              <el-input
                v-model="scope.row.customerSellingPoint"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.customerSellingPoint }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          :label="'产品话术'"
          align="center"
          prop="customerProductTalking"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerProductTalking }}</span> -->
              <el-input
                v-model="scope.row.customerProductTalking"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.customerProductTalking }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          :label="'强度/适合人群'"
          align="center"
          prop="customerStrengthSuitable"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerStrengthSuitable }}</span>
                             -->
              <el-input
                v-model="scope.row.customerStrengthSuitable"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.customerStrengthSuitable }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          :label="'上架时间'"
          align="center"
          prop="newTime"
        >
          <template v-slot:header>
            <!-- <div>
              <span class="table-heard-filter">采购</span>
            </div> -->
            <div @click="chatNewTime">
              <span class="table-heard-filter">上架时间</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="'尺码表'"
          align="center"
          prop="customSizeUrl"
          width="150px"
        >
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="right"
              width="auto"
              v-show="scope.row.customSizeUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.customSizeUrl"
                  style="width: 800px; height: 600px"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.customSizeUrl"
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          :label="'渠道链接'"
          align="center"
          prop="designShootingScene"
        >
          <template slot-scope="scope">
            <el-popover trigger="click" placement="left" width="300">
              <!-- <span>{{ scope.row.designShootingScene }}</span> -->
              <el-input
                v-model="scope.row.operationChannlLink"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.operationChannlLink }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改产品二级信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
    >
      <el-upload
        :action="Upload.url"
        :headers="Upload.headers"
        :limit="limit"
        :on-exceed="handleExceed"
        :on-success="handlePictureSuccessPic"
        :before-upload="beforeAvatarUpload"
        :on-preview="handlePictureCardPreview"
        :file-list="fileLi"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">导入文件</el-button>
        <!-- <i class="el-icon-plus"></i> -->
      </el-upload>
    </el-dialog>

    <el-dialog
      title="上架时间"
      :visible.sync="openNewTime"
      width="300px"
      append-to-body
      v-if="openNewTime"
    >
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="head-container el-dialog-div">
            <el-tree
              :data="visionNewTime"
              :props="defaultProps"
              :expand-on-click-node="false"
              @check="handleNewTime"
              highlight-current
              show-checkbox
            />
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submitNewTime">确 定</el-button>
        <el-button @click="cancelNewTime">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  listRelation,
  getRelation,
  delRelation,
  addRelation,
  updateRelation,
  add,
} from "@/api/product/relation";
import {
  listAttributes,
  getAttributes,
  delAttributes,
  addAttributes,
  updateAttributes,
} from "@/api/data/attributes";
import { listFabric, getInfoByName } from "@/api/data/Fabric";
import { download } from "@/utils/request";
import { getInfo } from "@/api/login.js";
// import { listSecondry, getSecondry, delSecondry, addSecondry, updateSecondry } from "@/api/product/secondry";
import {
  listCustom,
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  selectStaticTime,
} from "@/api/product/template";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Template",
  dicts: [
    "sys_product_qudao",
    "sys_one_zero",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_secondary",
  ],
  data() {
    return {
      defaultProps: {
        children: "childList",
        label: "staticName",
      },
      //商品-上架时间
      visionNewTime: [],
      NewTime: "",
      openNewTime: false,

      tableHeight: "",
      //搜索栏展示和收起
      isOpen: false,
      //面料名称
      mianliao: [],
      //胸垫/裤裆
      kudang: [],
      //衣长/裤长
      yichang: [],
      //版型
      banxing: [],
      //属性类别
      shuxing: [],
      //体形
      attributesList: [],

      pjtUrl: process.env.VUE_APP_BASE_API,
      file: "",
      fileLi: [{ url: "" }],
      Upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/product/template/importCustom",
      },
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      //logo相对路径
      logoUrl: "",
      //页面上存的暂时logo图片地址List
      fileList: [{ url: "" }],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品一级信息表格数据
      templateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        customerSellingPoint: null,
        customerProductTalking: null,
        customerStrengthSuitable: null,
        //一级类目，三级类目
        firstLevelColumn: null,
        firstLevelExtendedColumn: null,
        secondLevelColumn: null,
        //运营计划上架时间
        operationPlanTime: null,
        operationPlanTimeStart: null,
        operationPlanTimeEnd: null,
        copywritingFabricName: null,
        copywritingFamily: null,
        designFabricFunction: null,
        customPlanTime: null,
        operationChannlLink: null,
        colorPropertyStr: null,
        customPlanTimeStart: null,
        customPlanTimeEnd: null,
        customPlanTimeList: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        productNo: [
          { required: true, message: "货号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
  },
  created() {
    var Custom = JSON.parse(localStorage.getItem("Custom"));
    if (Custom) {
      // this.$set(this.queryParams, storeForm)
      this.queryParams = Custom;
    }
    var listCustom = JSON.parse(localStorage.getItem("listCustom"));
    if (listCustom) {
      this.$set(this.queryParams, "pageNum", listCustom.currentPage);
      this.$set(this.queryParams, "pageSize", listCustom.pageSize);

      this.Nowscroll = listCustom.scrollTop;

      // this.$set(this.queryParams, "productNo", otherVal.productNo);
      // this.$set(this.queryParams, "colorProperty", otherVal.colorProperty);
      // this.$set(this.queryParams, "manufacturerCode", otherVal.manufacturerCode);
      // this.$set(this.queryParams, "procureRemark", otherVal.procureRemark);
    }
    this.getList();
  },
  methods: {
    // 商品-上架时间
    submitNewTime() {
      this.openNewTime = false;
      this.queryParams.customPlanTimeList = this.NewTime;

      this.getList();
    },

    handleNewTime(n, obj) {
      console.log("n====>", JSON.stringify(n));
      console.log("obj====>", JSON.stringify(obj));
      console.log(JSON.stringify(obj.checkedNodes));
      const names = obj.checkedNodes.map((user) => user.staticDate);
      console.log(JSON.stringify(names.join(",")));
      this.NewTime = names.join(",");
    },
    // 商品-上架时间
    cancelNewTime() {
      this.openNewTime = false;
    },
    chatNewTime() {
      this.chatgpt("newTime");
      this.openNewTime = true;
    },
    //取值
    chatgpt(visionShootingPlan) {
      var obj = this.queryParams;

      delete obj.visionShootingPlanList;
      delete obj.shippingTimeList;
      delete obj.designShootingSampleList;
      delete obj.designSize;
      delete obj.operationPlanTimeList;
      console.log(JSON.stringify(obj));
      // return
      selectStaticTime({ dateName: visionShootingPlan, ...obj }).then((res) => {
        console.log(JSON.stringify(res));
        if (visionShootingPlan == "visionShootingPlan") {
          this.visionShootingPlan = res;
        } else if (visionShootingPlan == "visionShootingPlanMark") {
          this.visionShootingPlanMark = res;
        } else if (visionShootingPlan == "shippingTime") {
          this.visionShippingTime = res;
        } else if (visionShootingPlan == "newTime") {
          this.visionNewTime = res;
        } else if (visionShootingPlan == "operationPlanTime") {
          this.visionoperationPlanTime = res;
        }
      });
    },
    //搜索栏展示与收起
    shouqi() {
      // console.log(1);
      this.isOpen = !this.isOpen;
    },
    //点击某一行
    t(row, column, cell, event) {
      let vmEl = this.$refs["table"].$el;
      console.log(vmEl);
      const scrollParent = vmEl.querySelector(".el-table__body-wrapper");
      // this.Nowscroll = scrollParent.scrollTop
      // console.log(this.queryParams);
      console.log(scrollParent.scrollTop);
      // return
      var listCustom = {
        currentPage: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        scrollTop: scrollParent.scrollTop,

        // "productNo": this.queryParams.productNo,
        // "colorProperty": this.queryParams.colorProperty,
        // "manufacturerCode": this.queryParams.manufacturerCode,
        // "procureRemark": this.queryParams.procureRemark
      };
      localStorage.setItem("listCustom", JSON.stringify(listCustom));
      localStorage.setItem("Custom", JSON.stringify(this.queryParams));
      getInfo().then((res) => {
        //客服
        if (res.roles.indexOf("admin") > -1) {
          this.$router.push({
            path: "/product/template_edit",
            query: { id: row.id },
          });
        }
        //客服
        if (res.roles.indexOf("customer") > -1) {
          this.$router.push({
            path: "/product/template_edit",
            query: { id: row.id },
          });
        }
      });
    },
    change(val) {
      console.log(val);
      // console.log(JSON.stringify(this.form.designPropertyCategory));
      getInfoByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));
        this.form.designFlexibility = response.data.designFlexibility;
        this.form.designFabricFunction = response.data.designFabricFunction;
        this.form.designSpecialPresentation =
          response.data.designSpecialPresentation;
        this.form.designExerciseIntensity =
          response.data.designExerciseIntensity;
        this.form.designFitnessLevels = response.data.designFitnessLevels;
        this.form.designSomatosensory = response.data.designSomatosensory;
        this.form.designSoftness = response.data.designSoftness;
        this.form.designFabricThickness = response.data.designFabricThickness;
        this.form.designBreathability = response.data.designBreathability;
      });
    },
    downLoadFile(value) {
      console.log(JSON.stringify(value));
      window.location.href = value;

      // download.resource(value)
      //根据文件路径参数，按斜杠进行分割，取得文件名，这是download函数需要的第三个参数
      let list = value.split("/");
      let fileName = list[list.length - 1];
      //这是文件路径参数，因为download函数需要传三个参数，这是第二个参数
      let params = {
        resource: value,
      };
      /** request里面的download下载函数 */
      //download函数是若依自带的，第一个参数是请求的url路径，不需要变，这个路径下的controller后台方法也是若依写好封装好了的。
      // download("/common/download/resource", params, fileName);
      // console.log("文件名");
      // console.log("value");
    },
    formatData(row) {
      let rowPerson = (row && row.colorPropertyList) || [];
      let arr = [];
      rowPerson.forEach((item) => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item);
      });
      //
      return arr.join("/");
    },
    /**二级配置跳转**/
    go(row) {
      // console.log(row.id);
      this.$router.push({ path: "/product/secondry", query: { id: row.id } });
    },

    /** 查询产品一级信息列表 */
    getList() {
      this.loading = true;
      listCustom(this.queryParams).then((response) => {
        this.templateList = response.rows;
        console.log(JSON.stringify(this.templateList));
        setTimeout(() => {
          this.$refs["table"].bodyWrapper.scrollTop = this.Nowscroll;
        }, 13);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        logoPosition: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      localStorage.removeItem("listCustom");
      this.resetForm("queryForm");
      localStorage.removeItem("Custom");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加产品货号信息";
    },
    get() {
      console.log(JSON.stringify(this.form.firstLevelColumn));
      this.queryParam = {
        categoryName: this.form.firstLevelColumn,
        attributesName: "体型/胸型",
      };
      this.loading = true;
      listAttributes(this.queryParam).then((response) => {
        this.attributesList = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    getdesignPropertyCategory() {
      this.queryParam = {
        categoryName: this.form.firstLevelColumn,
        attributesName: "属性类别",
      };
      this.loading = true;
      listAttributes(this.queryParam).then((response) => {
        // this.attributesList = response.rows;
        this.shuxing = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    getdesignFitCup() {
      this.queryParam = {
        categoryName: this.form.firstLevelColumn,
        attributesName: "版型",
      };
      this.loading = true;
      listAttributes(this.queryParam).then((response) => {
        // this.attributesList = response.rows;
        this.banxing = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    getyichang() {
      this.queryParam = {
        categoryName: this.form.firstLevelColumn,
        attributesName: "衣长/裤长",
      };
      this.loading = true;
      listAttributes(this.queryParam).then((response) => {
        // this.attributesList = response.rows;
        this.yichang = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    //裤裆
    getkudang() {
      this.queryParam = {
        categoryName: this.form.firstLevelColumn,
        attributesName: "胸垫/裤裆",
      };
      this.loading = true;
      listAttributes(this.queryParam).then((response) => {
        // this.attributesList = response.rows;
        this.kudang = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    //面料名称
    getmianliao() {
      this.loading = true;
      listFabric(this.queryParams).then((response) => {
        this.mianliao = response.rows;
        // console.log(JSON.stringify(this.FabricList));
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getTemplate(id).then((response) => {
        this.file = response.data.purchasingReportAttachments;
        // this.fileLi = [
        //     { url: process.env.VUE_APP_BASE_API + response.data.purchasingReportAttachments }]//logo图片加的是这一行
        this.fileList = [
          { url: process.env.VUE_APP_BASE_API + response.data.logoPosition },
        ]; //logo图片加的是这一行

        this.form = response.data;
        //体形
        this.get();
        //属性类别
        this.getdesignPropertyCategory();
        //版型/罩杯
        this.getdesignFitCup();
        //衣长/裤长
        this.getyichang();
        //胸垫/裤
        this.getkudang();
        //面料名称
        this.getmianliao();
        console.log(JSON.stringify(this.form));
        this.open = true;
        this.title = "修改产品货号信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.purchasingReportAttachments = this.file;
      this.form.logoPosition = this.logoUrl; // 注：重要(用于添加到数据库)，加的是这一行
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除产品货号信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delTemplate(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/template/customerExport",
        {
          ...this.queryParams,
        },
        `话术库_${new Date().getTime()}.xlsx`
      );
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传文件让第二次覆盖第一的文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileLi = [fileList[fileList.length - 1]];
      }
      // }
    },
    daoru() {
      this.dialogVisible = true;
    },
    handlePictureSuccessPic(res, file) {
      console.log(JSON.stringify(res));
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.file = file.response.url;
      console.log(JSON.stringify(this.file));
      if (res.code == 200) {
        this.$modal.msgSuccess("导入成功");
        this.dialogVisible = false;
        this.$modal.msgError(res.msg);
        this.getList();
        // return true
      } else {
        this.$modal.msgError(res.msg);
        this.dialogVisible = true;
        // this.$message.msgError('该颜色未在字典定义')
        return;
      }
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      this.logoUrl = file.response.fileName;
      // console.log(JSON.stringify(url));
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
